<template>
	<view class="musicList" @click="playAudio">
		<view v-if="typeof img == 'number'" class="left-img">
			{{img}}
		</view>
		<template v-else>
			<image v-if="img" :src="img" mode="">
		</template>
		<view class="right-Card">
			<view v-if="nameValue" class="tit">
				{{nameValue}}
			</view>
			<view v-if="describe" class="alt">
				{{describe}}
			</view>
		</view>
	</view>
</template>

<script>
	/*
	  卡片参数 
	     不 传入 img 图片 不显示 
	     @ img           图片  传入数字不会显示图片
		 @ nameValue     名称
		 @ describe      介绍
	*/
	export default {
		name: 'musicCard',
		props: {
			img: {
				type: String | Number,
				default: false
			},
			nameValue: {
				type: String,
				default: false
			},
			describe: {
				type: String,
			},
			id: {
				type: Number
			}
		},
		data() {
			return {}
		},
		watch: {

		},
		methods: {
			playAudio() {
				this.$emit('playAudio', this.id)
			}
		}
	}
</script>
<style lang="scss">
	.musicList {
		width: 100%;
		height: 145rpx;
		border-bottom: 1px solid #ccc;
		padding: 13rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		image {
			width: 120rpx;
			height: 100%;
			margin-right: 40rpx;
			border-radius: 10rpx;
		}

		.left-img {
			width: 120rpx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 40rpx;
		}

		.right-Card {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		.alt {
			color: #bba8a8;
			font-size: 27rpx;
			text-overflow: ellipsis;
			white-space: normal;
			overflow: hidden;
		}

		.tit {
			font-size: 34rpx;
		}
	}
</style>
